<template>
    <div>
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <i class="box-title-icon fontColor" :class="newsContent.icon"></i>
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleNewsClick">
                        <el-tab-pane :label="newsContent.name" name="first">
                            <div class="tabs-content-box">
                                <el-table :data="newsList" :show-header="false" style="width: 100%;font-size:14px;">
                                    <el-table-column width="40">
                                        <template slot-scope="scope">
                                            <div class="todo-tag" v-bind:class="'todo-tag-'+(scope.$index+1)">{{scope.$index+1}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-item">
                                                <a href="#" title="" @click="openMenuFunction(scope.row)">{{scope.row.name}}</a>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <!--<el-table-column width="80">
                                        <template slot-scope="scope">
                                            <div class="todo-name">{{scope.row.original}}</div>
                                        </template>
                                    </el-table-column>-->
                                    <el-table-column width="102">
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row["publishTime"]}}</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
                <el-button class="btn-more" type="text" >
                    <a href="#" @click="handleNewsMore" class="fontColor">MORE</a>
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { newsContent } from './data/Content.js';
import bus from '../../common/bus';
// import { formatDate } from '~/assets/utils/date.js';
export default {
    name: 'NewsList',
    props: ['content'],
    data() {
        return {
            activeName: 'first',
            //newsList: require("./data/NewsData.json"),
            newsList:[],
            newsContent: newsContent,
            articleDetail: './articleDetail.html',
            config:{},
        };
    },
    created:function (){
        this.getInit();
    },
    methods: {
        getInit(){
            this.$axios.get(newsContent.contentUrl).then((res) => {
                this.getList(res.data[1]);
                this.config=res.data[1];
            });
        },
        getList(param){
            let data = {
                typeId:param.typeId,
                categoryId:param.categoryId,
                status:'1',
                ps:'10',
                pn:'1',
                frontId:'1'
            };
            this.$axios.get('/ptp-cms/cmscontent/getContentCategoryType',{params:data})
                .then(res => {
                    this.newsList = res.data.data.dataList;
                });
        },
        // 打开详情页面
        openMenuFunction(item){
            let url = this.articleDetail+'?typeId=' + item.typeId + '&articleId='+ item.id;
            // window.open(url, '_blank');
            let menu = {
                url:url,
                name:newsContent.name,
                isNew:false // 是否在新页面打开
            };
            bus.$emit('openMenu',menu);
        },
        handleNewsClick(tab, event) {
            console.log(tab, event);
        },
        // 打开更多页面
        handleNewsMore(){
            // let routeData = this.$router.resolve({
            //     path: '/ArticleMore',
            //     query: { categoryId:this.config.categoryId,typeId:this.config.typeId,name:newsContent.name }
            // });
            // window.open(routeData.href, '_blank');
            let menu = {
                url:window.location.href.split('#')[0]+'#/ArticleMore?categoryId='+this.config.categoryId+'&typeId='+this.config.typeId+'&name='+newsContent.name,
                name:newsContent.name,
                isNew:false // 是否在新页面打开
            }; 
            bus.$emit('openMenu',menu);
        }
    }
};
</script>
